<template>
	<view class="search">
		<u-input prefixIcon="search" type="number" v-model="value" border="none" :customStyle="customStyle" fontSize="24rpx"
			color="#FF594D" :prefixIconStyle="prefixIconStyle" placeholderClass="placeholderStyle" clearable
			placeholderStyle="placeholderStyle" :maxlength='11' placeholder="请输入客户手机号码" shape="circle">
			<template slot="suffix">
				<u-button shape="circle" @click="search" :text="tips" type="success" :customStyle="btnCustomStyle"></u-button>
			</template>
		</u-input>
	</view>
</template>

<script>
	export default {
		name: "search-button-input",
		data() {
			return {
				tips: '搜索',
				value: '',
				prefixIconStyle: {
					"color": '#FF594D',
					"font-size": '50rpx'
				},

				customStyle: {
					"background-color": '#f3f3f3',
					'height': '68rpx',
					'padding-left': '30rpx'
				},
				placeholderStyle: {
					'color': '#fc7f76'
				},
				btnCustomStyle: {
					'height': '68rpx',
					'width': '125rpx',
					'background-color': '#ff594d',
					'font-size': '24rpx'
				},

			};
		},
		props: ['placeholderText'],
		methods: {
			search() {
				this.$emit('getValue', this.value)
			}
		}
	}
</script>

<style lang="scss">
	.search {
		padding: 18rpx 20rpx;
		background-color: #fff;

		.placeholderStyle {
			color: #fc7f76;
		}

		.uni-input__content {

			// 根据uView实际生成的DOM结构和类名调整选择器
			.u-input__content__clear {

				background-color: #FF594D;
			}
		}
	}
</style>